<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-15 10:45:13
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-15 11:22:13
-->
<template>
  <div class="attachment-fields">
    <a-row class="row row-header">
      <a-col class="cell" :span="4">名称</a-col>
      <a-col class="cell" :span="5">标题</a-col>
      <a-col class="cell" :span="4">值类型</a-col>
      <a-col class="cell center" :span="2">必填</a-col>
      <a-col class="cell" :span="4">输入方式</a-col>
      <a-col class="cell" :span="3">默认值</a-col>
      <a-col class="cell" :span="2">操作</a-col>
    </a-row>
    <a-row v-for="(item, index) in items" :key="index" class="row row-body">
      <a-col class="cell" :span="4">
        <a-input size="small" v-model:value="item.name"></a-input>
      </a-col>
      <a-col class="cell" :span="5">
        <a-input size="small" v-model:value="item.caption"></a-input>
      </a-col>
      <a-col class="cell" :span="4">
        <enum-select
          name="FieldValueType"
          size="small"
          v-model:value="item.valueType"
        ></enum-select
      ></a-col>
      <a-col class="cell center" :span="2">
        <a-checkbox v-model:checked="item.required"></a-checkbox>
      </a-col>
      <a-col class="cell" :span="4">
        <enum-select
          name="FieldInputType"
          size="small"
          v-model:value="item.inputType"
        ></enum-select>
      </a-col>
      <a-col class="cell" :span="3">
        <enum-select
          name="SystemValueType"
          size="small"
          v-model="item.systemType"
          v-if="item.inputType == FieldInputType.System"
        ></enum-select>
        <template v-else>
          <a-input
            size="small"
            v-if="item.valueType == FieldValueType.String"
            v-model:value="item.defaultValue"
          />
          <a-checkbox
            v-if="item.valueType == FieldValueType.Boolean"
            v-model:checked="item.defaultValue"
          />
          <a-input-number
            size="small"
            v-if="
              item.valueType == FieldValueType.Integer ||
              item.valueType == FieldValueType.Float
            "
            v-model:value="item.defaultValue"
          />
          <a-date-picker
            size="small"
            v-if="item.valueType == FieldValueType.DateTime"
            v-model:value="item.defaultValue"
          />
        </template>
      </a-col>
      <a-col class="cell" :span="2">
        <a-button
          type="primary"
          danger
          size="small"
          @click="items.splice(index, 1)"
          >删除</a-button
        >
      </a-col>
    </a-row>
    <a-button type="primary" @click="addItem">添加附件字段</a-button>
  </div>
</template>

<script lang="ts" setup>
import {
  AttachementFieldDto,
  FieldInputType,
  FieldValueType,
  SystemValueType,
} from "@/api/resource/types";

type AttachmentFieldsProps = {
  items: Array<Partial<AttachementFieldDto>>;
};
const props = defineProps<AttachmentFieldsProps>();

const addItem = () => {
  props.items.push({
    name: "",
    caption: "",
    required: false,
    valueType: FieldValueType.String,
    inputType: FieldInputType.TextInput,
    systemType: SystemValueType.SystemTime,
    inputProps: {},
  });
};
</script>

<style lang="less" scoped>
.row {
  padding: 5px 0;
  .cell {
    padding: 0 3px;
    &.center {
      text-align: center;
    }
  }
}
</style>
